<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GoMoKu</title>
    <!-- CSS -->
    <style>
        /* 去除边距 */
        *{
            margin: 0;
            padding: 0;
        }
        body{
            width: 1000px;
        }
        .game_info{
            width: 600px;
            margin-top: 100px;
            margin-left: 650px;
            display: none;
        }
        table{
            width: 500px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
            border-collapse: collapse;
        }
        .chessboard{
            width: 600px;
            margin-left: 650px;
            display: none;
        }


        .user_info{
            border: 1px solid black;
            width: 50px;
            height: 30px;
            padding: 0;
        }
        .game_status{
            /* text-align: center; */
            height: 30px;
            width: 50px;
        }

        .grid{
            border: 1px solid black;
            width: 50px;
            height: 50px;
            padding: 0;
            background-image: url(./assets/background.gif);
            background-size: cover;
        }
        
        .dialog_button{
            width: 140px;
            line-height: 38px;
            text-align: center;
            font-weight: bold;
            color: #0a0a0a;
            text-shadow:1px 1px 1px #333;
            border-radius: 5px;
            margin:0 20px 20px 0;
            position: relative;
            overflow: hidden;
        }

        .dialog{
            width: 600px;
            margin-left: 735px;
            margin-top: 350px;
        }


    </style>
</head>
<body>
    <!-- 对局信息 -->
    <div class="game_info">
        <table>
            <tr>
                <td class="user_info">Player1(You)</td>
                <td class="user_info" id="player1_name"></td>
                <td class="user_info" id="player2_name"></td>
                <td class="user_info">Player2</td>
            </tr>
        </table>
        <table>
            <tr>
                <td class="game_status" id="game_status"></td>
            </tr>
        </table>
    </div>
    <!-- 棋盘 -->
    <div class="chessboard">
        <table>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
            <tr>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
                <td class="grid"></td>
            </tr>
        </table>
    </div>
    
    <!-- js -->
    <script>
        let myTurn = false
        const whiteChess = 0
        const blackChess = 1
        let myChess = -1
        // 消息类型
        const login = 0
        const loginSuccess = 1
        const moveChess = 2
        const gameEnd = 3
        const opponentQuit = 4
        const gameStart = 5

        let username = ""
        let opponent = ""
        let game_status = document.getElementById('game_status')
        while(!username)    username = prompt("请输入您的用户名，用户名不能为空！")
        
        // 让棋盘元素显形
        document.getElementsByClassName("game_info")[0].style.display = "block"
        document.getElementsByClassName("chessboard")[0].style.display = "block"
        game_status.innerHTML = 'Welcome, '+ username +'! Please wait for an opponent'
        document.getElementById('player1_name').innerHTML=username

        var ws = new WebSocket("ws://139.9.84.117:8000")

        // 连上服务器
        ws.onopen = function(){
            console.log("已经连上服务器")
            ws.send(JSON.stringify({type:login, content:username}))
        }

        // 收到消息
        ws.onmessage = function(evt) {
            let data = JSON.parse(evt.data)
            console.log(data)
            // 通过消息类别确定要如何处理
            switch (data.type) {
                case loginSuccess:
                    // 登录成功
                    console.log('loginSuccess')
                    break;
                case gameStart:
                    // 游戏开始
                    opponent = data.content
                    myTurn = data.state
                    document.getElementById('player2_name').innerHTML=opponent
                    if(myTurn){
                        myChess = blackChess
                        game_status.innerHTML="Your turn"
                    }
                    else{
                        myChess = whiteChess
                        game_status.innerHTML="Opponent's turn"
                    }
                    console.log('game start with', opponent)
                    break;
                case moveChess:
                    // 更新棋盘
                    chessboard[data.row][data.col] = data.color
                    // 画棋子
                    let chessUrl = (data.color == whiteChess)? "url(./assets/whiteStone.gif)" : "url(./assets/blackStone.gif)"
                    document.getElementsByClassName("grid")[10*data.row+data.col].style.backgroundImage = chessUrl
                    myTurn = data.color != myChess
                    if(myTurn)
                        game_status.innerHTML="Your turn"
                    else
                        game_status.innerHTML="Opponent's turn"
                    break
                case gameEnd:
                    myTurn = 0
                    if(data.win == myChess) {
                        game_status.innerHTML = "You win"
                        alert(username+' win!')
                    }
                    else{
                        game_status.innerHTML = "Opponent win"
                        alert(opponent+' win!')
                    }
                    break
                case opponentQuit:
                    alert("opponentQuit!")
                    // 对方退出游戏 则刷新网页
                    location.reload()
                    break
                default:
                    console.log("Error code!!!", data)
                    break;
            }
        }
        ws.onclose = function(){
            console.log("连接已经关闭")
        }

        // 记录棋盘内容 默认-1
        let chessboard = []
        for(let i=0; i<10; ++i){
            chessboard.push([-1,-1,-1,-1,-1,-1,-1,-1,-1,-1])
        }

        // 描述初始游戏状态
        // game_status.innerHTML = "wait for your opponent to join in..."

        // 为每个格子绑定点击事件
        for(let i=0; i<100; ++i){
            document.getElementsByClassName("grid")[i].onclick = setChess
        }

        // 落子
        function setChess(){
            // 非当前用户回合
            if(!myTurn)     return
            // 当前位置已经落过棋子
            if(chessboard[this.parentNode.rowIndex][this.cellIndex] != -1)   return 
            // 向服务器发送落子信息
            ws.send(JSON.stringify({type:moveChess, row:this.parentNode.rowIndex, col:this.cellIndex}))
            //防止多次下棋
            myTurn = 0
        }
    </script>